<template>
  <div class="audio-player Audio">
    <audio ref="audio" :src="audionow.src"></audio>
    <div class="controls">
      <span class="up" @click="up"></span>
      <span class="play" @click="play">
        <span class="icon-btn icon-play" v-if="status === 'pause'"></span>
        <span class="icon-btn icon-pause" v-if="status === 'play'"></span>
      </span>
      <span class="down" @click="down"></span>
      <span class="progress" ref="progress"><div class="pgn" :style="'width:' + getprogress() + '%;'"></div><span class="now-icon" :style="'left: calc(' + getprogress() + '% - 5.5px);'"></span></span>
      <span class="played-time">{{getTotal(now)}}</span>
      <span class="split-line"></span>
      <span class="audio-time">{{getTotal(duration)}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      audionow: { src: '' },
      status: 'pause',
      duration: 0,
      now: 0,
      audio: null,
      changeing: false,
      ended: false
    }
  },
  created () {
    this.$nextTick(() => {
      const self = this
      this.audio = this.$refs.audio
      this.$refs.progress.addEventListener('click', this.progress, false)
      this.audio.oncanplay = function () {
        self.duration = this.duration
        if (!self.changeing && !self.ended) self.play()
        else if (self.changeing) self.changeing = false
        else if (self.ended) {
          self.audio.load()
          self.ended = false
        }
      }
      this.audio.addEventListener('timeupdate', this.updateProgress, false)
      this.audio.addEventListener('ended', this.audioEnded, false)
    })
  },
  beforeDestroy () {
    const self = this
    this.audio.removeEventListener('timeupdate, ended', () => {
      self.audio = null
    })
    this.$refs.progress.removeEventListener('click', () => {})
  },
  methods: {
    clear () {
      this.audionow = { src: '' }
      this.duration = 0
      this.now = 0
      this.audio = null
      this.ended = false
      this.status = 'pause'
      this.changeing = false
    },
    up () { this.$emit('up') },
    down () { this.$emit('down') },
    progress (evt) {
      if (this.changeing) return
      this.changeing = true
      setTimeout(() => {
        this.now = (evt.offsetX / this.$refs.progress.offsetWidth) * this.duration
        this.audio.currentTime = this.now
        // this.audio.play()
        // this.changeing = false
      }, 500)
    },
    getprogress () {
      return Math.round((Math.floor(this.now) / Math.floor(this.duration)) * 100, 0) || 0
    },
    audioEnded () {
      console.log('pause:::')
      this.now = 0
      this.status = 'pause'
      this.ended = true
      this.$emit('ended')
    },
    updateProgress () {
      // const value = Math.round((Math.floor(el.currentTime) / Math.floor(el.duration)) * 100, 0)
      // $('.pgs-play').css('width', value * 0.907 + '%')
      this.now = this.audio.currentTime
    },
    leftpad (val) {
      return val < 10 ? `0${parseInt(val)}` : `${parseInt(val)}`
    },
    getTotal (ss) {
      if (ss < 10) return `0:${this.leftpad(ss)}`
      return ss < 60 ? `0:${this.leftpad(ss)}` : `${parseInt(ss / 60)}:${this.leftpad(ss % 60)}`
    },
    setAudio (audio) {
      // if (~Object.prototype.toString.call(audios).indexOf('Array')) { // 判断数组
      //   this.audios = audios
      // }
      this.audionow = audio
      this.duration = 0
      this.audio = this.$refs.audio
      this.audio.load() // 更新
    },
    play () {
      if (!this.duration) return
      if (this.audio.paused) {
        if (this.duration === 0) this.audio.load()
        this.audio.play()
        this.status = 'play'
      } else {
        this.audio.pause()
        this.status = 'pause'
      }
    }
  }
}
</script>

<style lang="scss">
  .audio-player {
    width: 100%;
    >.controls > span { vertical-align: middle; display: inline-block; }

    >.controls{
      width: 100%;
      display: flex;
      align-items:center;
      >.progress {
        position: relative;
        flex: 1;
        height: 6px;
        background: #EAEAEA;
        margin: 0 24px;
        border-radius: 3px;
        overflow: visible;
        >.pgn { height: 6px; background: #5289FC; border-radius: 3px; }
        .now-icon { height: 11px; width: 11px; border-radius: 50%; background-color: #5289fc; position: absolute; left: 0; top: -2.5px; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
        &:hover { .now-icon {  opacity: 1; } }
      }
      >.up { width: 16px; height: 16px; background: url(./up-gray.png) no-repeat left center / 16px; margin-right: 17px; }
      >.down { width: 16px;  height: 16px; background: url(./down-gray.png) no-repeat right center / 16px; margin-left: 17px;}
      >.up:hover { background-image: url(./up.png); }
      >.down:hover { background-image: url(./down.png); }
      >.play {
        height: 26px;
        width: 26px;
        border-radius: 50%;
        border: 2px solid #5289fc;
        >.icon-play { background: url(./play.png) no-repeat 60% 50% / 12px; display: inline-block; height: 100%; width: 100%; }
        >.icon-pause { background: url(./pause.png) no-repeat center / 10px; display: inline-block; height: 100%; width: 100%; }
        &:hover { background-color: #E8EFFD; }
      }
      .audio-time,.played-time { color: #868686; font-size: 12px }
      .split-line { height: 12px; width: 1px; margin: 0 7px; background: #D3D3D3; }
    }
  }
</style>
